<template>
	<view class="loadingC" v-if="showloading">
		<view class="contens flex-center">
			<view class="loading-cont">
				<view class="k-ball7a"></view>
				<view class="k-ball7b"></view>
				<view class="k-ball7c"></view>
				<view class="k-ball7d"></view>

				<view class="cont-text">
					{{title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'lzLoading',
		props: {
			showloading: {
				type: Boolean,
				default: false
			},
			title: {
				default: "加载中..."
			}
		},
		data() {
			return {
			};
		},
		watch: {
			title(newValue, oldValue) {
				this.title = newValue;
			},
		},
		mounted() {

		},
		methods: {
			open() {
				this.showloading = true
			},
			close() {
				this.showloading = false
			}
		}
	};
</script>

<style lang="scss" scoped>
	.loadingC {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		animation: fadeInUpSmall .3s;

		.contens {
			width: 100%;
			height: 100%;

			.loading-cont {
				position: relative;
				background: #fff;
				width: 40rpx;
				height: 40rpx;
				padding: 30rpx 50rpx 70rpx 50rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 15rpx #ccc;
				margin-top: -20%;

				.k-ball7a {
					border: 0;
					margin: 0;
					width: 18rpx;
					height: 18rpx;
					position: absolute;
					border-radius: 50%;
					animation: k-loadingO 2s ease infinite;
					background: #286cf3;
					animation-delay: -1.5s
				}

				.k-ball7b {
					border: 0;
					margin: 0;
					width: 18rpx;
					height: 18rpx;
					position: absolute;
					border-radius: 50%;
					animation: k-loadingO 2s ease infinite;
					background: #e95f54;
					animation-delay: -1s
				}

				.k-ball7c {
					border: 0;
					margin: 0;
					width: 18rpx;
					height: 18rpx;
					position: absolute;
					border-radius: 50%;
					animation: k-loadingO 2s ease infinite;
					background: #f19a4a;
					animation-delay: -0.5s
				}

				.k-ball7d {
					border: 0;
					margin: 0;
					width: 18rpx;
					height: 18rpx;
					position: absolute;
					border-radius: 50%;
					animation: k-loadingO 2s ease infinite;
					background: #5fb986
				}

				.cont-text {
					position: absolute;
					bottom: 20rpx;
					left: 0;
					width: 100%;
					text-align: center;
					font-size: 20rpx;
					color: #a1a1a1;
				}
			}

			@keyframes k-loadingO {

				0%,
				100% {
					transform: translate(0)
				}

				25% {
					transform: translate(160%)
				}

				50% {
					transform: translate(160%, 160%)
				}

				75% {
					transform: translate(0, 160%)
				}
			}
		}
	}
</style>
